define("ar_semantic.icons", ['gitee'], function (gitee) {

    let cps = {

        data() {
            return { icons: [], searchTxt: "", total: 0 }
        },
        methods: {
            search() {
                if (this.searchTxt === "") {
                    this.icons = iconDataList.slice(0, 100);
                    return;
                }
                this.icons = iconDataList.filter(icon => (icon.toUpperCase().indexOf(this.searchTxt.toUpperCase()) !== -1)).slice(0, 30);
            },
            searchAll() {
                this.searchTxt = "";
                this.icons = iconDataList;
            }
        },
        mounted() {
            gitee.getFileContent("data/icons.json", false, true).then(data => {
                console.log(data);
                iconDataList = data;
                this.total = iconDataList.length;
                this.icons = iconDataList.slice(0, 100);
            })
        },

        template: `
            <div class="ui container mt-3 mb-3">
                <h2 class="p-3 text-center">SemanticUI 图标</h2>
                <div class="ui message floating">
                    使用方法：
                    <br/>
                    &lti class="home icon"&gt&lt/i&gt
                    <i class="home icon"></i>
                    <br/>

                    &lti class="home small icon"&gt&lt/i&gt
                    <i class="home small icon"></i>
                    <br/>

                    &lti class="home large icon"&gt&lt/i&gt
                    <i class="home large icon"></i>
                    <br/>

                    &lti class="home big icon"&gt&lt/i&gt
                    <i class="home big icon"></i>
                    <br/>

                    &lti class="home huge icon"&gt&lt/i&gt
                    <i class="home huge icon"></i>
                    <br/>

                    &lti class="home massive icon"&gt&lt/i&gt
                    <i class="home massive icon"></i>
                    <br/>
                </div>

                <div class="d-flex my-2">
                    <div class="flex-grow-1 mr-1 ui input">
                        <input type="text" v-model="searchTxt" placeholder="输入关键字回车，搜索图标..."
                            @keyup.enter="search"/>
                    </div>
                    <button type="button" class="ui button" @click="search">查询</button>
                </div>
                <div class="alert alert-success" role="alert">
                    <span class="mr-2">默认显示前 <b>100</b> 个图标，总共 <b>{{total}}</b> 个图标</span>
                    <button type="button" class="ui button" @click="searchAll">查看所有</button>
                </div>

                <div class="d-flex flex-wrap ui segment">
                    <div class="d-flex m-2 align-items-center bg-light p-2 rounded" v-for="icon in icons">
                        <i class="icon big" :class="icon"></i>
                        <span class="ml-1">{{icon}}</span>
                    </div>
                </div>
            </div>
        `,

    };

    return {
        cps
    }

});